$(function () {
    var picture = $('#picturePreview');
    var submitPicture = $('#submitPicture');
    var submitPictureModal = $('#pictureModal');
    picture.cropper({
        aspectRatio: 16 / 9,
        viewMode: 1
    });

    $('#pictureSelector').on('change', function (e) {
        var input = $(this);
        var files = !!input[0].files ? input[0].files : [];
        if (!files.length) {
            return;
        }
        var file = files[0];
        if (!window.FileReader) {
            window.alert(lang('photograph.1'));
            return;
        }
        if (file.size > 5242880) {
            window.alert(lang('photograph.2'));
            return;
        }
        if (!/^image/.test(file.type)) {
            window.alert(lang('photograph.3'));
            return;
        }

        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = function (e) {
            picture.attr('src', this.result);
            input.val('');
            submitPictureModal.modal('show');
        };
    });
    submitPictureModal.on('shown.bs.modal', function () {
        formInlineRight(submitPicture);
        picture.cropper('replace', picture.attr('src'));
    });

    var defaultSuccessHandler = function (data) {
        submitPicture.removeAttr('disabled');
        return data.data.filename;
    };

    submitPicture.on('click', function (e) {
        e.preventDefault();

        picture.cropper('getCroppedCanvas', {
            width: 700,
            height: 393.75
        }).toBlob(function (blob) {
            if (blob.size > 3145728) {
                formInlineTip(submitPicture, lang('photograph.4'));
                return;
            }

            if (submitPicture.attr('disabled') !== undefined) {
                return;
            }
            submitPicture.attr('disabled', true);
            var config = submitPicture.data('config');
            var imageType = submitPicture.data('type');
            var formData = new FormData();
            formData.append('file', blob, 'blob.jpeg');
            formData.append('config', config);
            formData.append('hotel', window.currentHotel);
            $.ajax('/Home/File/upload', {
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    var imageUrl = defaultSuccessHandler(data);
                    pictureCropperSuccess(imageUrl, imageType);

                },
                error: function (error) {
                    submitPicture.removeAttr('disabled');
                    if (error.responseJSON === undefined) {
                        formInlineTip(submitPicture, lang('tip.system'));
                    } else {
                        formInlineTip(submitPicture, error.responseJSON.info + (error.responseJSON.data ? ',' + error.responseJSON.data : ''));
                    }
                }
            });
        }, 'image/jpeg');
    });
});
$(function () {
    var picture = $('#pictureInfoPreview');
    var submitPicture = $('#submitInfoPicture');
    var submitPictureModal = $('#pictureInfoModal');
    picture.cropper({
      //aspectRatio: 240 / 151,
        viewMode: 1,
        autoCropArea: 0.6
    });

    $('#pictureInfoSelector').on('change', function (e) {
        var input = $(this);
        var files = !!input[0].files ? input[0].files : [];
        if (!files.length) {
            return;
        }
        var file = files[0];
        if (!window.FileReader) {
            window.alert(lang('photograph.1'));
            return;
        }
        if (file.size > 5242880) {
            window.alert(lang('photograph.2'));
            return;
        }
        if (!/^image/.test(file.type)) {
            window.alert(lang('photograph.3'));
            return;
        }

        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = function (e) {
            picture.attr('src', this.result);
            input.val('');
            submitPictureModal.modal('show');
        };
    });
    submitPictureModal.on('shown.bs.modal', function () {
        formInlineRight(submitPicture);
        picture.cropper('replace', picture.attr('src'));
    });

    var defaultSuccessHandler = function (data) {
        submitPicture.removeAttr('disabled');
        return data.data.filename;
    };

    submitPicture.on('click', function (e) {
        e.preventDefault();

        picture.cropper('getCroppedCanvas', {
            width: 700,
            height: 393.75
        }).toBlob(function (blob) {
            if (blob.size > 3145728) {
                formInlineTip(submitPicture, lang('photograph.4'));
                return;
            }

            if (submitPicture.attr('disabled') !== undefined) {
                return;
            }
            submitPicture.attr('disabled', true);
            var config = submitPicture.data('config');
            var imageType = submitPicture.data('type');
            var formData = new FormData();
            formData.append('file', blob, 'blob.jpeg');
            formData.append('config', config);
            formData.append('hotel', window.currentHotel);
            $.ajax('/Home/File/upload', {
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    var imageUrl = defaultSuccessHandler(data);
                    pictureInfoCropperSuccess(imageUrl, imageType);
                    formInlineTip($('#uploadPicture'), lang('dealer.uploadSucceed'), 2);
                },
                error: function (error) {
                    formInlineTip($('#uploadPicture'), lang('photograph.6'));
                    submitPicture.removeAttr('disabled');
                    if (error.responseJSON === undefined) {
                        formInlineTip(submitPicture, lang('tip.system'));
                    } else {
                        formInlineTip(submitPicture, error.responseJSON.info + (error.responseJSON.data ? ',' + error.responseJSON.data : ''));
                    }
                }
            });
        }, 'image/jpeg');
    });
});